@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/suppliermy/public.css')}}">
@section('content')
<div class="mainHrContent" id="hrfeedback_add">
    <div class="storelistTitle">
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 财务信息管理
            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click="window.location.href ='{{ route('home.demand.demandAdd')}}'">免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrfeedback_adds">
            <div class="basicInfo_title">
                <span></span>
                财务信息管理 > 申请退还保证金
            </div>
            <div class="feedback_addMain">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <p class="formTitle"><span>
                            *
                        </span>
                        申请退还理由
                    </p>
                    <textarea v-model="form.desc" placeholder="请具体描述您的退还理由..."></textarea>
                    <p class="formInput">
                        <span class="formTitles">
                            <span>
                                *
                            </span>

                            联系人姓名：

                        </span>
                        <el-input size='mini' v-model="form.link_name"></el-input>
                    </p>
                    <el-form-item prop="link_phone">
                        <p class="formInput">
                            <span class="formTitles">
                                <span>
                                    *
                                </span>
                                联系人电话：
                            </span>
                            <el-input size='mini' v-model="form.link_phone"></el-input>
                        </p>
                    </el-form-item>
                    <p class="formInput">
                        <span class="formTitles">
                            应退还金额：
                        </span>
                        @{{form.bond}}元
                    </p>
                </el-form>
                <button @click="submitForm('ruleForm')">提交申请</button>
            </div>
        </div>
    </div>
</div>
<style>
    .hrContent .el-upload__input {
        display: none;
    }

    .feedback_addMain {
        width: 900px;
        margin: auto;
    }

    .feedback_addMain textarea {
        width: 884px;
        height: 200px;
        resize: none;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(204, 204, 204, 1);
        opacity: 1;
        padding: 10px;
    }

    .feedback_addMain button {
        display: block;
        margin: auto;
        margin-top: 40px;
        width: 122px;
        height: 30px;
        background: rgba(209, 0, 24, 1);
        border: 0px;
        border-radius: 4px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 30px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }

    .formTitle {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        margin-bottom: 20px;
        color: rgba(51, 51, 51, 1);
        text-shadow: 0px 0px 0px #000;
    }

    .formTitle>span,
    .formTitles>span {
        color: #D10018;
    }

    .formTitles {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        text-shadow: 0px 0px 0px #000;
        width: 110px;
        text-align: right;
    }

    .formInput {
        display: flex;
        align-items: center;
        margin-top: 30px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .formInput .el-input {
        width: 200px;
    }
</style>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrfeedback_add = new Vue({
            el: '#hrfeedback_adds',
            data: () => {
                return {
                    form: {
                        bond: getQueryString("money"),
                        desc: '',
                        link_name: '',
                        link_phone: '',
                    },
                    rules: {
                        link_phone: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                    },
                }
            },
            created() {},
            mounted() {},
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                bond: this.form.bond,
                                desc: this.form.desc,
                                link_name: this.form.link_name,
                                link_phone: this.form.link_phone,
                            }
                            apiAjax("{{ route('home.user.supplierBondReturnApi')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    window.location.href = "{{ route('home.suppliermy.supplierAssetsInfo') }}";
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                            }, (erro) => {

                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection